<!--
 * @Author: zhangwenqiang
 * @Date: 2021-07-25 14:39:17
 * @LastEditors: OBKoro1
 * @LastEditTime: 2021-07-27 00:34:07
 * @FilePath: /operate/src/view/mainPage/top.vue
-->
<template>
  <div class='topMenu'>
    <div class="msgCon">
    </div>
    <div class="language">
      <div>
        <el-select v-model="value" placeholder="请选择" @change="languageChange">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-dropdown  @command="handleCommand">
        <span class="el-dropdown-link">
          <div class="userImg"><img class="imgSty" src="@/assets/userImg.png" alt="">超级管理员</div>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="quit">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "CHINAESE",
      options: [
        {
          value: "CHINAESE",
          label: "简体中文"
        },
        {
          value: "ENGLISH",
          label: "English"
        }
      ]
    };
  },
  methods: {
    languageChange(val) {
      if (val === "CHINAESE") {
        this.$i18n.locale = "zh-CN"; //切换为中文
      } else {
        this.$i18n.locale = "en-US"; //切换为英文
      }
    },
    handleCommand(command) {
      console.log(command);
    }
  }
};
</script>
<style scoped lang='scss'>
.topMenu{
  height: 50px;
  line-height: 50px;
  background: #fff;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
}
.language{
  display: flex;
  /deep/.el-input__inner{
    width: 105px;
    background: transparent;
    border: none;
  }
}
.userImg{
  color: #999999;
  font-size: 12px;
  margin-left: 20px;
  cursor: pointer;
}
.imgSty{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 10px;
}
</style>